<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useIpcListener } from "@/framework/ipc";
import type { WindowStateChangeArgs } from "@common/ipc-window-types.ts";
import { IconClose, IconMaximize, IconMinus, IconUnmaximize } from "@/assets/icon/window.tsx";
import ThemeToggle from "@/framework/theme/theme-toggle.vue";
import type { MenubarItemType } from "./menubar.types.ts";
import Menubar from "./menubar.tsx";

const { showAppName = true } = defineProps<{
  showAppName?: boolean;
  menuItems?: MenubarItemType[];
}>();

const appName = import.meta.env.VITE_APP_NAME;

// 窗口状态
const isMaximized = ref(false);
onMounted(() => native.ipc.invoke("window.get-state").then((state: WindowStateChangeArgs) => (isMaximized.value = state.maximized)));
useIpcListener("window.state-changed", (state: WindowStateChangeArgs) => (isMaximized.value = state.maximized));

const minimize = () => native.ipc.send("window.minimize");
const toggleMaximizeState = () => (isMaximized.value ? native.ipc.send("window.unmaximize") : native.ipc.send("window.maximize"));
const closeWindow = () => native.ipc.send("window.close");
// 窗口状态 END
</script>

<template>
  <header class="titlebar">
    <div class="titlebar-left">
      <div class="app-logo">
        <img src="/favicon.svg" :alt="appName" draggable="false" />
      </div>
      <menubar v-if="menuItems" :items="menuItems" />
      <div v-if="showAppName" class="app-name">
        <span>Devil</span>
        <span>Box</span>
      </div>
    </div>
    <div class="titlebar-right">
      <slot name="right"></slot>
      <theme-toggle class="r-btn window-button" />
      <div class="r-btn window-button" @click="minimize">
        <icon-minus />
      </div>
      <div class="r-btn window-button" @click="toggleMaximizeState">
        <icon-unmaximize v-if="isMaximized" />
        <icon-maximize v-else />
      </div>
      <div class="r-btn window-button btn-close-app" @click="closeWindow">
        <icon-close />
      </div>
    </div>
    <span class="titlebar-resizer" />
  </header>
</template>

<style lang="less">
.titlebar {
  position: relative;
  box-sizing: border-box;
  height: var(--titlebar-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  -webkit-app-region: drag;
  user-select: none;
  //box-shadow: 11px 0 21px 0 rgba(162, 162, 162, 0.31);
  //background-color: var(--titlebar-bg-color);
  //border-bottom: 1px solid ;

  > div {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: var(--titlebar-height);
    flex: 1;
  }

  &-left {
    > div {
      margin-left: 8px;
      height: var(--titlebar-height);
      line-height: var(--titlebar-height);
    }

    .app-logo {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: auto;

      > img {
        height: 55%;
        width: auto;
      }
    }

    .app-name {
      letter-spacing: 1px;
      margin-left: 8px;
      color: var(--color-text);
      transform: scale(0.9);

      > span:last-child {
        color: var(--color-primary);
        //padding: 0 2px;
      }
    }
  }

  &-right {
    display: flex;
    justify-content: flex-end;

    > div {
      -webkit-app-region: no-drag;
      height: 100%;
      min-width: var(--titlebar-height);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 0 10px;
      transition: all 0.2s;

      &.window-button {
        width: calc(var(--titlebar-height) + 10px);
      }

      &.r-btn:hover {
        background-color: var(--window-button-hover-bg);
      }

      &.btn-close-app {
        &:hover {
          background-color: #c42b1c;

          svg {
            color: #fff !important;
            fill: #fff !important;
          }
        }
      }

      svg,
      .anticon {
        transition: all 0.2s;
        font-size: 14px;
        color: var(--color-text);
      }
    }
  }
}

.titlebar-resizer {
  -webkit-app-region: no-drag;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  cursor: ns-resize;
}
</style>
